<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			 #draggable {
			    width: 200px;
			    height: 20px;
			    text-align: center;
			    background: white;
			  }
			
			  .dropzone {
			    width: 200px;
			    height: 20px;
			    background: blueviolet;
			    margin-bottom: 10px;
			    padding: 10px;
			  }
		</style>
	</head>
	<body>
		<div class="dropzone">
		    <div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)">
		        <!-- This div is draggable -->
				<svg class=""draggable="true">
					<g> 
						<g transform="translate(0.5,0.5)" id="ellipseGrap">
							<ellipse cx="10" cy="10" rx="15" ry="9" 
							fill="#fff" stroke="#000" stroke-width="1" cursor="move">
							</ellipse>
						</g> 
					</g>
				</svg>
		    </div>
		</div>
		<script type="text/javascript">
			var dragged;
			
			  /* 可拖动的目标元素会触发事件 */
			//   document.addEventListener("drag", function( event ) {
			
			//   }, false);
				let ellipseGrap=document.querySelector('#ellipseGrap')
			  document.addEventListener("dragstart", function( event ) {
			      // 保存拖动元素的引用(ref.)
				  console.log(event)
			      // dragged = event.target;
				  event.target=ellipseGrap
				  console.log(event.target)
			      // 使其半透明
			      // event.target.style.opacity = .5;
			  }, false);
			
			//   document.addEventListener("dragend", function( event ) {
			//       // 重置透明度
			//       event.target.style.opacity = "";
			//   }, false);
			
			//   /* 放下目标节点时触发事件 */
			  document.addEventListener("dragover", function( event ) {
			      // 阻止默认动作
			      event.preventDefault();
			  }, false);
			
			//   document.addEventListener("dragenter", function( event ) {
			//       // 当可拖动的元素进入可放置的目标高亮目标节点
			//       if ( event.target.className == "dropzone" ) {
			//           event.target.style.background = "purple";
			//       }
			
			//   }, false);
			
			//   document.addEventListener("dragleave", function( event ) {
			//       // 当拖动元素离开可放置目标节点，重置其背景
			//       if ( event.target.className == "dropzone" ) {
			//           event.target.style.background = "";
			//       }
			
			//   }, false);
			
			  // document.addEventListener("drop", function( event ) {
			  //     // 阻止默认动作（如打开一些元素的链接）
			  //     event.preventDefault();
			  //     // 移动拖动的元素到所选择的放置目标节点
			  //     if ( event.target.className == "dropzone" ) {
			  //         event.target.style.background = "";
			  //         dragged.parentNode.removeChild( dragged );
			  //         event.target.appendChild( dragged );
			  //     }
			    
			  // }, false);
		</script>
	</body>
</html>
